<template>
  <view class="hire_page">
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left" style="background-color: #4C91FA;">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;color: #FFFFFF;">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;">
          <image style="width: 48rpx;height: 48rpx;"
            src="https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png" mode="" />
        </view>
        转租申请
      </view>
    </view>
    <view class="top_bg">
      <view style="background-color: rgb(76,145,250);">
        <view :style="{ width: '100%', height: recHeight }"></view>
        <view class="_w-max" style="height: 96rpx;"></view>
        <view style="height: 72rpx;"></view>
      </view>
      <view style="height: 384rpx;background: linear-gradient( 180deg, rgb(76,145,250) 0%, #F5F5F5 100%);"></view>
    </view>
    <view :style="{ width: '100%', height: recHeight }"></view>
    <view class="_w-max h_96" style="height: 96rpx;"></view>
    <view class="container">
      <view class="container_top">
        <image class="sub_hire_car" src="https://taxi.raxan.xyz/wechat/static/images/sub_hire_car.png" />
      </view>
      <view class="select_veh">
        <view style="line-height: 56rpx;color: #008DFF;font-size: 32rpx;font-weight: 600;">车辆信息</view>
        <view v-if="vehInfo.id">
          <uni-forms border label-width="100" :modelValue="vehInfo">
            <uni-forms-item label="车辆结构" name="car_cate">
              <input disabled class="formItem" :value="vehInfo.car_cate" type="text" />
            </uni-forms-item>
            <uni-forms-item label="变速箱" name="gear">
              <input disabled class="formItem" :value="vehInfo.gear === 'auto' ? '自动' : '手动'" type="text" />
            </uni-forms-item>
            <uni-forms-item label="座位数" name="seat_num">
              <input disabled class="formItem" :value="vehInfo.seat_num + '座'" type="text" />
            </uni-forms-item>
            <uni-forms-item label="排量" name="power">
              <input disabled class="formItem" :value="vehInfo.power + 'T'" type="text" />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view
          @click="selVeh"
          style="width: 400rpx;line-height: 96rpx;margin: 0 auto;margin-top: 30rpx;border-radius: 12rpx;border: 2rpx solid #C5C5C5;text-align: center;font-size: 32rpx;">
          {{ vehInfo.id ? '更改' : '选择' }}车辆</view>
      </view>
      <view class="form">
        <uni-forms border label-width="100" ref="form" :modelValue="formData" :rules="rules">
          <uni-forms-item label="姓名" name="username" required>
            <input class="formItem" v-model="formData.username" type="text" placeholder="请输入联系人"
              @input="binddata('username', $event.detail.value)" />
          </uni-forms-item>
          <uni-forms-item label="手机号" name="mobile" required>
            <input class="formItem" v-model="formData.mobile" type="text" placeholder="请输入手机号"
              @input="binddata('mobile', $event.detail.value)" />
          </uni-forms-item>
          <uni-forms-item label="联系地址" name="address" required>
            <input class="formItem" v-model="formData.address" type="text" placeholder="请输入联系地址"
              @input="binddata('address', $event.detail.value)" />
          </uni-forms-item>
          <uni-forms-item label-position="top" label="你还有其他需求吗？" name="remark"></uni-forms-item>
          <view>
            <textarea style="background-color: #FAFAFA;width: 100%;padding: 30rpx;border-radius: 16rpx;"
              v-model="formData.remark" type="text" maxlength="140" placeholder="如果有其他要求，请填写～" />
          </view>
        </uni-forms>
      </view>
    </view>
    <view style="height: 112rpx;"></view>
      
    <view class="btn" @click="submit">提交</view>
  </view>
</template>
<script>
import { addSublease } from '@/api/hire.js'

const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

const IMAGES = {
  BANNER: concat('banner.png'),
  CHEVRO: 'https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png'
}


export default {
  data() {
    return {
      // 表单数据
      rate_index: '',
      scrollFilter: 0,
      vehInfo: {},
      formData: {
        username: '',
        mobile: '',
        address: '',
        remark: ''
      },
      rules: {
        address: {
          rules: [
            { required: true, errorMessage: '请输入联系地址' }
          ]
        },
        username: {
          rules: [
            { required: true, errorMessage: '请输入联系人' }
          ]
        },
        mobile: {
          rules: [
            { required: true, errorMessage: '请输入手机号' },
            { format: 'number', errorMessage: '请输入手机号' }
          ]
        }
      },
      recHeight: 0,
      imgs: IMAGES,
      srollOpacity: 0,
      srollColor: 255,
      navList: [],
      list: [],
      cate_id: '',
      total: 0,
      page: 1,
      loading: false,
    }
  },
  onPageScroll(e) {
    this.scrollFilter = e.scrollTop < 100 ? Math.floor(e.scrollTop / 100) : 1;
    this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
  },
  onLoad() {
    this.getPhoneInfo();
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    selVeh() {
      uni.navigateTo({
        url: '/pages/hire_sub/select_veh/index',
        events: {
          getVeh: (option) => {
            this.vehInfo = option;
            console.log(JSON.stringify(option))
          },
        },
      })
    },
    submit() {
      if (!this.vehInfo.id) return uni.showToast({ title: '请选择车辆', icon: "none" })
      this.$refs.form.validate().then(() => {
        const params = {
          ...this.formData,
          car_id: this.vehInfo.id, 
          type_name: this.vehInfo.type_name
        }
        this.addSublease(params)
      }).catch(err => {
        console.log('表单错误信息：', err);
      })
    },
    toHire() {
      uni.switchTab({
        url: '/pages/hire/index'
      })
    },
    addSublease(data) {
      this.checkLoading(
        () => addSublease(data).then(res => {
          if (res.status === 200) {
            this.back();
          }
        }).catch(err => {
          uni.showToast({ title: '发布失败，请重试', icon: "none" })
        })
      )
    },
    checkLoading(fn) {
      this.loading = true;
      uni.showLoading({ title: '加载中' })
      fn().finally(() => {
        this.loading = false;
        uni.hideLoading()
      })
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>

.top_bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  height: 456rpx;
}

.h_96 {
  height: 96rpx;
}

.c_fff {
  color: #FFFFFF;
}

.btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
    position: fixed;
    left: 32rpx;
    right: 32rpx;
    bottom: 8rpx;
    z-index: 10;
  }

.f_s_18 {
  font-size: 36rpx;
}

.felx_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire_page {
  box-sizing: border-box;
  position: relative;
  min-height: 101vh;
  background: #F8F9FC;
  color: rgba(0, 0, 0, 0.9);
  .formItem {
    box-sizing: content-box;
    padding: 14rpx 0;
  }
  .container {
    margin: 0 30rpx;
    position: relative;
    z-index: 1;
    .container_top {
      height: 152rpx;
      overflow: hidden;
      position: relative;
      .sub_hire_car {
        width: 380rpx;
        height: 238rpx;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .select_veh {
      padding: 40rpx 30rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
    }

    .form {
      margin-top: 20rpx;
      padding: 26rpx 30rpx;
      padding-bottom: 40rpx;
      background: #FFFFFF;
      border-radius: 20rpx;



      /deep/ .uni-forms-item__label {
        color: #333333 !important;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500 !important;
        font-size: 28rpx !important;
      }
    }
  }
}
</style>